<template>
  <div class="three">
    <div class="heads">
      <div class="left">
        <img
          src="../assets/images/edit.png"
          v-if="user.email == formLabelAlign.name"
          v-show="false"
          @click="edit"
          alt="">
      </div>
      <div class="left">
        <!-- <img
          src="../assets/images/share.png"
          v-clipboard:copy="url"
          @click="copyLink"
          alt=""> -->
      </div>
    </div>

    <section class="model">
      <div class="title">第{{ times }}次跳一跳</div>

      <el-form :model="formLabelAlign">
        <el-form-item label="创建人">
          {{ formLabelAlign.name }}
        </el-form-item>
        <el-form-item label="最少参与人数">
          {{ formLabelAlign.number }}人
        </el-form-item>
        <el-form-item label="参与金额">
          {{ formLabelAlign.money }} {{ coin_type }}
        </el-form-item>
      </el-form>

      <el-form :model="formLabelAlign">
        <el-form-item label="当前参与人数">
          {{ formLabelAlign.userNum }}人
        </el-form-item>
        <el-form-item label="当前奖池总金额">
          {{ formLabelAlign.total }} {{ coin_type }}
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <el-button @click="join">{{desc}}</el-button>
        <el-button  v-clipboard:copy="url" v-if="isOver === false" @click="copyLink">邀请伙伴</el-button>
      </div>
      <el-button v-if="isOver" @click="route('/two')">立刻开始新回合</el-button>
      <p class="span" v-if="isOver">小提示：1.回合参与者均结束游戏后方可开奖；
      2.回合创建者将收到奖池的8%作为奖励，快去创建回合吧！</p>
      <!-- <el-button @click="join">{{ desc }}</el-button> -->
    </section>

    <section class="model">
      <div class="title">游戏记录 </div>

      <section class="table">
        <table>
          <tr>
            <td v-for="(item, i) in head" :key="i">{{ item }}</td>
          </tr>

          <tr v-for="(item, i) in list" :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.rank }}</td>
            <td>{{ item.point }}</td>
            <td>{{ item.costTime }}</td>
            <td>{{ item.endTime }}</td>
          </tr>

          <tr v-if="!list || list < 1">
            <td colspan="4">暂无数据</td>
          </tr>
        </table>
      </section>
    </section>
  </div>
</template>

<script>
import { success } from '@/utils/res.js'
export default {
  name: 'three',
  data () {
    return {
      times: 1,
      formLabelAlign: {
        name: '',
        number: 0,
        money: 0,
        userNum: 0,
        total: 0
      },
      head: ['参与者', '最终排名', '最终得分', '跳跃时长/秒', '结束时间'],
      list: [
      ],
      desc: '立即参与',
      isOver: true,
      url: '',
      aid: '',
      coin_type: window.location.host.split('.')[0]
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    },
    token () {
      return this.$store.state.token
    },
    aroundId () {
      return this.$store.state.aroundId
    }
  },
  methods: {
    route (r) {
      this.$router.push(r)
    },
    join () {
      if (this.desc === '开始游戏') {
        this.$store.dispatch('jump/join', {
          ck: this.user.email,
          aid: this.aid
        })
          .then(res => {
            if (res.code === 0) {
              this.$router.push({path: '/play', query: {join: this.aid}})
            }
          })
      }
    },
    edit () {
      // .
    },
    copyLink () {
      success('复制成功')
    }
  },
  async created () {
    let aroundId = window.location.href.split('join=')[1] || this.$store.state.aroundId.aroundId
    // let aroundId = window.location.href.split('join=')[1]
    // console.log(this.aroundId.aroundId)
    // console.log(!aroundId)
    if (!this.user.id) {
      await this.$store.dispatch('getUser', {
        language: 'cn',
        head: 1
      })
    }
    if (!aroundId || aroundId === '') {
      console.log(this.user)
      console.log(this.$store.state.user)
      let res = await this.$store.dispatch('jump/check', {
        ck: this.$store.state.user.email || this.user.email
      })
      aroundId = res.result.aroundId
      this.aid = aroundId
    } else {
      if (!this.token.access_token) {
        this.$router.push({path: '/login', query: {join: aroundId}})
        return
      }
      // console.log(aroundId)
    }
    this.aid = aroundId
    this.$store.dispatch('jump/info', {
      ck: this.$store.state.user.email || this.user.email,
      aid: aroundId
    })
      .then(res => {
        if (res.code === 0) {
          let result = res.result
          this.formLabelAlign.name = result.createrName
          this.formLabelAlign.number = result.minParticipantsNum
          this.formLabelAlign.money = result.money
          this.formLabelAlign.total = result.totalAmout
          this.formLabelAlign.userNum = result.currentParticipantsNum
          this.list = result.participants || []
          this.desc = result.desc
          this.isOver = result.isOver
          let url = window.location.href.indexOf('join=') > -1 ? window.location.href : window.location.href + '?join=' + aroundId
          // this.url = result.money + 'ETH带走奖池90%的巨額ETH，以太坊跳一跳，跳跃即挖矿，赢者赚以太，谁更持久，一跳便知！' + url
          this.url = result.aroundName + ' ' + url
          // this.route('/play')
        } else {
          // this.$router.push('/')
        }
      })
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variable.scss';

.three {
  .heads {
    display: flex;
    height: 40px;

    > .left {
      padding: 10px;
      flex: 1;
      box-sizing: border-box;

      > img {
        width: 20px;
      }

      &:nth-child(2) {
        text-align: right;
      }
    }
  }

  .model {
    padding: 30px 20px 20px;
    position: relative;
    margin: -12px 20px 20px;
    border: 4px solid $model-border;
    border-radius: 10px;
    background: $model-bg;
    margin-top: 40px;

    > .span {
      margin-top: 20px;
      color: #ccc;
      font-size: 12px;
      white-space: pre-line;
    }

    .title {
      // padding: 0 14px;
      width: 150px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      top: -24px;
      line-height: 40px;
      background: $model-btn;
      text-align: center;
      border: 4px solid $model-border;
      border-radius: 10px;
      box-sizing: border-box;
      color: $model-border;
      font-weight: bolder;
    }

    &:last-child {
      // margin-top: 0;
    }

    > .text {
      color: $model-border;
      font-weight: bold;
      line-height: 40px;
      text-align: left;
    }

    .el-button {
      display: block;
      margin: 20px auto 0;
      background: $btns;
      color: $white;
      border: 2px solid $model-border;
      border-radius: 40px;
      padding: 9px 18px;
    }

    > .table {
      width: 100%;
      overflow-x: auto;
    }

    > .table > table {
      color: $model-border;
      font-size: 14px;
      text-align: center;
      line-height: 30px;

      tr {
        border-radius: 4px;
      }

      tr:nth-child(even) {
        background: $white;
      }

      td {
        min-width: 74px;

        &:last-child {
          min-width: 140px;
        }
      }
    }

    > .el-form {
      .el-form-item__label, .el-form-item__content {
        color: $model-border;
      }

      .el-form-item__content {
        text-align: right;
      }

      .el-form-item {
        margin-bottom: 0;
      }

      &:nth-child(3) {
        margin-top: 10px;
        border-top: 1px dashed $blue-text;
      }
    }

    > .el-button {
      width: 200px;
    }
  }
}
.btnBox{
  display: flex;
}
</style>
